<template>
  <view class="total-container">
    <view class="container">
      <view
        class="info"
        v-for="(item, index) in info"
        :key="index"
        @click="showEvents(index)"
      >
        <view class="left">
          <view class="logo" @click="previewImage('item.src')">
            <u-image
              style="border-radius: 50%"
              :src="item.src"
              width="120rpx"
              height="120rpx"
              mode="aspectFit"
            ></u-image>
          </view>
        </view>

        <view class="right">
          <view class="top">
            <view class="company-name">{{ item.title }}</view>
            <view class="logo" @click="previewImage('item.icon')">
              <u-image :src="item.icon" width="40rpx" height="40rpx"></u-image>
            </view>
          </view>
          <view class="bottom">
            <view>{{ item.address }}</view>
            <view>{{ item.people }}人</view>
            <view>{{ item.tech }}</view>
          </view>
        </view>
      </view>
      <!-- <view class="location">
        <i class="iconfont icon-dingwei"></i>
        <view class="position"
          >陕西-咸阳-秦都区-陕西工业职业技术学院经开校区</view
        >
      </view> -->
    </view>

    <view class="content"> </view>
  </view>
</template>

<script setup>
//这个是点击预览图片封装的组件
import { previewImage } from "@/utils/tool.js";
import { useEventsStore } from "../../store/modules/Events/index";
const info = ref([
  {
    src: "https://pic.imgdb.cn/item/66dd4eecd9c307b7e9b99ea5.png",
    title: "应用软件系统开发",
    address: "陕西省",
    people: 3,
    tech: "vue | Java | Axure RP",
    icon: "https://img2.baidu.com/it/u=2444824041,67871580&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500",
  },
  {
    src: "https://pic.imgdb.cn/item/66dd7fcad9c307b7e90b6e77.png",
    title: "互联网＋创新创业大赛",
    address: "陕西省",
    people: "10+",

    icon: "https://img2.baidu.com/it/u=2444824041,67871580&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500",
  },
  {
    src: "https://pic.imgdb.cn/item/66dd80cdd9c307b7e90c8961.png",
    title: "挑战杯",
    address: "陕西省",
    people: "10+",

    icon: "https://img2.baidu.com/it/u=2444824041,67871580&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500",
  },
  {
    src: "https://pic.imgdb.cn/item/66de3a3bd9c307b7e91cfe46.png",
    title: "安卓移动应用开发",
    address: "陕西省",
    people: 3,
    tech: "Android | Java | Axure RP",
    icon: "https://img2.baidu.com/it/u=2444824041,67871580&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500",
  },
]);
const showEvents = (index) => {
  const useEvents = useEventsStore();
  console.log(index);
  useEvents.setIndex(index);

  uni.navigateTo({
    url: "/pagesB/showEvents/index",
  });
};
</script>
<script>
export default {
  name: "",
};
</script>

<style lang="scss" scoped>
.total-container {
  background-color: #f1f1f1;

  // reference：参考
  .container {
    width: 100%;
    padding: 30rpx 20rpx;
    background-color: #fff;

    .info {
      width: 100%;
      border: 1px solid #ccc;
      padding: 15rpx;
      display: flex;
      margin-top: 30rpx;
      // 去除第一个元素的左边距
      &:first-child {
        margin-top: 0;
      }
      .left {
        margin-right: 20rpx;
        .logo {
          border-radius: 50%;
        }
      }

      .right {
        padding: 10rpx 0;

        .top {
          display: flex;
          align-items: center;
          .company-name {
            font-size: 40rpx;
            font-weight: 900;
          }
          .logo {
            margin-left: 15rpx;
          }
        }
      }

      .bottom {
        display: flex;

        view {
          // margin-right: 20rpx;
          padding-right: 20rpx;
          padding-left: 20rpx;
          border-right: 1px solid #ccc;
          font-size: 26rpx;
          margin-top: 15rpx;
          color: #6c6c6c;
        }

        view:first-child {
          padding-left: unset;
        }

        view:last-child {
          border: unset;
        }
      }
    }

    .location {
      display: flex;
      margin-top: 30rpx;
      padding-left: 20rpx;
      align-items: center;

      .position {
        margin-left: 15rpx;
        font-size: 24rpx;
        color: #646464;
      }
    }
  }

  .content {
    margin-top: 15rpx;
    background-color: #fff;

    .introduce {
      padding: 20rpx 40rpx;
      padding-bottom: 40rpx;

      .raw {
        .title {
          font-size: 36rpx;
          font-weight: 900;
        }
        .text {
          font-size: 29rpx;
          line-height: 40rpx;
          color: #5f5f5f;
          text-indent: 2em;
        }
      }

      .image {
        display: flex;
        // align-items: center;
        // justify-content: center;
        margin: 20rpx 0;
        width: 100%;
        height: 400rpx;
        background-size: cover;
        border-radius: 15rpx;
      }
    }
  }
}
</style>
